<script>
import { throttle, debounce } from "lodash-es";
import { mapGetters } from "vuex";
import TodoForm from "../components/TodoForm.vue";
import Chart from "../components/Chart.vue";
import useMouseMove from "../components/hooks/useMouseMove";

import { ElButton, ElOption, ElPagination } from "element-plus";

export default {
  components: {
    TodoForm,
    ElOption,
    ElPagination,
    ElButton,
    Chart,
  },
  setup() {
    const { data } = useMouseMove();
    return {
      data,
    };
  },
  data() {
    return {
      showAdd: false,
      todos: [],
      conditions: {
        days: "all",
        priority: "all",
        isFinished: "all",
        limit: 2,
      },
      page: 1,
      isEnd: false,
      count: 0,
      chartData: [],
    };
  },
  created() {
    this.search();
  },
  mounted() {},
  beforeUnmount() {},
  computed: {
    user() {
      return this.$store.state.user;
    },
    ...mapGetters(["avatar"]),
  },
  methods: {
    async search() {
      const { data } = await this.$request("/todos", {
        params: {
          ...this.conditions,
          offset: (this.page - 1) * this.conditions.limit,
        },
      });
      if (data.success) {
        this.count = data.query.count;
        this.page = data.query.page;
        if (this.page > 1) {
          this.todos.push(...data.query.results);
        } else {
          this.todos = data.query.results;
        }
      }
    },
    handleModifyTodo(todo) {
      this.todos = this.todos.map((t) => (t.id === todo.id ? todo : t));
    },
    handleScroll: throttle(function () {
      // 判断滚动条是否到底
      if (
        window.innerHeight + window.scrollY >=
        document.body.scrollHeight - 1
      ) {
        if (this.isEnd) return;
        const maxPage = Math.ceil(this.count / this.conditions.limit);
        this.isEnd = this.page + 1 == maxPage;
        this.page += 1;
        this.search();
      }
    }, 500),
    async stat() {
      // this.$nextTick()
      const { data } = await this.$request("/todos/stat");
      if (data.success) {
        // 转换数据格式
        this.chartData = [
          ...data.query.finished.map((i) => ({
            name: "finished." + i.priority,
            value: i.count,
          })),
          ...data.query.notFinished.map((i) => ({
            name: "notFinished." + i.priority,
            value: i.count,
          })),
        ];
      }
    },
  },
  watch: {
    // 深度侦听
    conditions: {
      handler() {
        this.page = 1;
        this.isEnd = false;
        this.search();
      },
      deep: true,
    },
    todos: {
      handler() {
        this.stat();
      },
      deep: true,
    },
  },
  created() {
    // 监听滚动
    window.addEventListener("scroll", this.handleScroll);
  },
  activated() {
    // 获取代办列表
    this.search();
  },
  beforeUnmount() {
    // 取消监听
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>
<template>
  <div class="h-[110vh] container mx-auto flex">
    <div class="w-1/3">
      <header class="h-48">
        <div
          class="w-30 h-30 rounded-full overflow-hidden border-2 border-white"
        >
          <img class="w-full h-full object-center object-cover" :src="avatar" />
        </div>

        <h1 class="text-purple-500 text-2xl">{{ user?.nickname }}的代办列表</h1>
        <h1 class="text-purple-500 text-2xl">{{ data.x }}, {{ data.y }}</h1>
      </header>
      <img :src="vueLogo" />
      <Chart style="width: 200px; height: 150px" :data="chartData" />
      <ElButton @click="showAdd = true">新代办</ElButton>
      <ElButton @click="$router.push({ name: 'Profile' })"
        >修改个人信息</ElButton
      >
      <TodoForm
        v-if="showAdd"
        v-model="showAdd"
        title="新建代办"
        @add-todo="todos.unshift($event), (showAdd = false)"
      />
    </div>
    <div class="w-2/3">
      <RouterView #="{ Component }">
        <component
          :is="Component"
          :todos="todos"
          :conditions="conditions"
          :isEnd="isEnd"
          @modify-todo="handleModifyTodo"
        />
      </RouterView>
    </div>

    <!-- <Teleport to="body">
      <section>你看，我是body的节点！</section>
    </Teleport> -->
  </div>
</template>
<style>
.bg-img {
  background-image: url("/pexels-pixabay-259915.jpg");
}
</style>
